<template>
  <div>
    <RefreshComponent @updateData="updateData"></RefreshComponent>
    <i-cell-group>
      <i-cell :title="item.name" value="性别：未知" label="来自：TX数据平台" v-for="(item, index) in newsArr" :key="index"></i-cell>
  </i-cell-group>
    <i-spin size="large" fix v-if="spinShow"></i-spin>
  </div>
</template>

<script>
  import RefreshComponent from '@/components/public/RefreshComponent'
  export default {
    data () {
      return {
        newsArr: [],
        spinShow: false,
        currPage: 1
      }
    },
    components: { RefreshComponent },
    methods: {
      getNamesList () {
        this.spinShow = true
        wx.request({
          url: 'https://api.tianapi.com/txapi/cname/', // 这里必须在后面呢加上 '/',才可以访问到
          data: {
            key: 'c732ed00482b7208218faf599e32239a',
            num: 10,
            page: this.currPage
          },
          header: {'content-type':'application/json'},
          method: 'GET',
          dataType: 'json',
          responseType: 'text',
          success: (result)=>{
            const { code, newslist = [] } = result.data
            if (code === 200) {
              newslist.forEach(ele => {
                ele.name = `姓名：${ele.naming}`
              })
              this.newsArr = this.newsArr.concat(newslist)
            }
          },
           complete: ()=>{
            this.spinShow = false
            wx.stopPullDownRefresh()
           }
        })
      },
      updateData () {
        this.getNamesList()
      }
    },
    onLoad () {
      this.getNamesList()
    },
    onPullDownRefresh () {
      this.currPage = 1
      this.newsArr = []
      this.getNamesList()
    },
    onReachBottom () {
      this.currPage ++
      this.getNamesList()
    }
  }
</script>

<style scoped>
  a {
    color: lightblue;
  }
</style>